<script setup lang="ts">
import { itemIconKey, itemIconValue } from '@renderer/types'
import { nextTick, onMounted, reactive, ref } from 'vue'
import useSettingStore from '@renderer/stores/modules/setting'
import defaultShotKeysConfig from '@renderer/components/setting/defaultShotKeysConfig'
const settingStore = useSettingStore()

const winConfig = reactive<{
  width: number
  height: number
  x: number
  y: number
}>({
  width: 800,
  height: 600,
  x: 0,
  y: 0
})

const isMove = ref<boolean>(false)

const showMenu = ref<boolean>(false)
const mousedown = (event: MouseEvent) => {
  const { x, y } = event
  winConfig.width = window.innerWidth
  winConfig.height = window.innerHeight
  winConfig.x = x
  winConfig.y = y
  isMove.value = true
}
const mousemove = (event: MouseEvent) => {
  if (!isMove.value) return

  const x = event.screenX - winConfig.x
  const y = event.screenY - winConfig.y
  window.electron.ipcRenderer.send('window-move', { ...winConfig, x, y })
}

const mouseup = () => {
  isMove.value = false
}

const mouseenter = () => {
  showMenu.value = true
}

const mouseleave = () => {
  showMenu.value = false
}

const showType = ref<itemIconKey>('clock')

const menuRef = ref<HTMLElement>()

const menuItemClick = async ({ key }: { key: itemIconKey; value: itemIconValue }) => {
  showType.value = null as unknown as itemIconKey

  await nextTick()

  showType.value = key
}

onMounted(() => {
  window.electron.ipcRenderer.send(
    'open-dev-mode',
    JSON.stringify({
      modeStatus: settingStore.$state.isDevCode,
      shotKeys: defaultShotKeysConfig
    })
  )
})
</script>
<template>
  <main
    class="index h-full bg-transparent flex flex-col"
    :class="[{ 'cursor-move': isMove }]"
    @mousedown="mousedown"
    @mousemove="mousemove"
    @mouseup="mouseup"
    @mouseleave="mouseleave"
    @mouseenter="mouseenter"
  >
    <section class="w-full flex-1 duration-300 overflow-hidden">
      <Clock
        v-if="showType === 'clock'"
        class="animate__animated"
        :class="[{ animate__slideInDown: showType === 'clock' }]"
      />
      <Countdown
        v-if="showType === 'countdown'"
        class="animate__animated"
        :class="[{ animate__slideInDown: showType === 'countdown' }]"
      />
    </section>
    <clock-menu
      ref="menuRef"
      class="h-0 flex-shrink-0"
      :class="[{ 'h-6 p-[2px]': showMenu }]"
      @item-click="menuItemClick"
    />
  </main>
</template>
<style lang="scss" scoped></style>
